<template>
  <div>
     <h1>ref获取组件</h1>
     <h1>{{myhobby}}</h1>
     <h1>{{mycity}}</h1>
     <h1>{{myage}}</h1>
     <h1>{{mycarname}}</h1>
     <button @click="changeHob"> 改变爱好</button>
      <button  @click="changeCity">改变城市</button>
      <button @click="changeCar">改变车的名字</button>
     <hr>
     <mine-one ref="myone"></mine-one>
     <hr>
     <mine-two></mine-two>
  </div>
</template>
<script setup>
  import {ref,nextTick,onMounted,watchEffect,defineAsyncComponent,readonly,onActivated,onDeactivated,
    shallowRef,shallowReactive,shallowReadonly,
    getCurrentInstance,toRef,reactive,toRefs
  } from 'vue'
  // onActivated onDeactivated keepAlive 产生的俩个生命周期

  import mineOne from './mineOne.vue'
  
  // 导入异步组件defineAsyncComponent
  // 组件的懒加载 提高性能
  let mineTwo = defineAsyncComponent(() =>
    import('./mineTwo.vue')
  );

  let myone=ref()//创建ref 挂载到子组件 获取到子组件  
  let myhobby=ref("踢足球");
  let mycity=ref("廊坊")
  
  nextTick(()=>{ //获取最新的dom,等待dom更新后执行
      console.log(myone.value,"#########")
    

  })
  onMounted(()=>{
      console.log(myone.value,"#########")
      // 访问子组件通过defineExpose 暴露的数据和方法
        console.log(myone.value.myname)
        myone.value.say("兰博基尼")

          // watchEffect() 监听组件的所有变化
        // 只要组件内部的数据等 有变化 立即执行
        watchEffect(()=>{
            console.log("组件内部有数据变化了")
            // 使用场景 组件数据有变化了 清空一些内容
            console.log(myhobby.value)
            // 去切换一些界面
            console.log(mycity.value)
          // 做一些提示
          
        })  

  })
  let changeHob=()=>{
    myhobby.value="篮球"
  }
  let changeCity=()=>{
    mycity.value="北京"
  }
// vue3的readonly 只能 使用 不能修改
  let myage=readonly("18")

  // shallowRef shallowReactive
  // 代表的数据变为浅响应式数据 深层的数据 不会发生页面的改变
  let kk=shallowRef(11)
  let state=shallowReactive({
    obj:{
      name:1,
      num:{
        k:1
      }
    }
  })
  let hh=shallowReadonly(34)
  // getCurrentInstance 获取挂载到全局的插件
  let {proxy}=getCurrentInstance();
  // console.log(proxy,"8888888888888888")
  // 使用vue3 挂载的全局插件
  // app.config.globalProperties.run()
    proxy.run()

  let mydata=reactive({
      name:"奔驰",
      price:188888,
      color:"红色"
  })
  // toRef和toRefs相比一次只能 转变一个数据变为响应次
  // 
  let mycarname=toRef(mydata,'name')
  let changeCar=()=>{
      mycarname.value="宝马"
  }
  // let {name,price,color}=toRefs(mydata);

</script>